<template>
  <div id="add-cater-merchants" class="route-page">
    <el-button
      @click="goback()"
      size="mini"
      round
      style="margin-left: 820px"
      type="primary"
      >返回</el-button
    >
    <div class="container">
      <el-row>
        <el-col :span="24">
          <el-steps :active="active" finish-status="success" align-center>
            <el-step title="查看基本信息"></el-step>
            <el-step title="查看店铺信息"></el-step>
            <el-step title="查看展示信息"></el-step>
            <el-step title="查看收银信息"></el-step>
          </el-steps>
        </el-col>
        <el-col :span="24" style="margin-top: 30px">
          <!-- 商户选择 -->
          <el-row v-if="active === 0">
            <el-col :span="12" :offset="6">
              <el-form
                ref="formCorp"
                :model="formCorp"
                :rules="rules"
                :inline-message="true"
                label-position="left"
                label-width="140px"
                disabled
              >
                <el-form-item label="店铺名称:" prop="storeName">
                  <el-input
                    v-model="formCorp.storeName"
                    placeholder="请输入店铺名称"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="店铺类型:" prop="storeType">
                  <template v-for="item in storeType">
                  <el-radio :key="item.value" v-model="formCorp.storeType" :label="item.value">{{ item.label }}</el-radio>
                </template>
                </el-form-item>
                <el-form-item label="经营面积(㎡):" prop="managerArea">
                  <el-input
                    v-model="formCorp.managerArea"
                    placeholder="请输入经营面积"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="建筑面积(㎡):" prop="buildingArea">
                  <el-input
                    v-model="formCorp.buildingArea"
                    placeholder="请输入建筑面积"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="租赁面积(㎡):" prop="leaseholdArea">
                  <el-input
                    v-model="formCorp.leaseholdArea"
                    placeholder="请输入租赁面积"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="仓库面积(㎡):" prop="warehouseArea">
                  <el-input
                    v-model="formCorp.warehouseArea"
                    placeholder="请输入仓库面积"
                    clearable
                  ></el-input>
                </el-form-item>

                <div class="flex-row">
                  <el-form-item prop="businessLicense" label="营业执照:">
                    <div>
                      <!-- <el-upload
                        :action="action"
                        list-type="picture-card"
                        :limit="1"
                        :on-preview="handlePictureCardPreview"
                        :on-success="upLoadPic"
                      >
                        <i class="el-icon-plus"></i>
                        <span>仅上传一张</span>
                      </el-upload>-->

                      <el-upload
                        :action="action"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-success="upLoadPic"
                        style="margin: 10px"
                        :file-list="imgList"
                        :headers="headers"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <!-- <el-dialog :visible.sync="dialogVisible1">
                        <img width="100%" :src="dialogImageUrl" alt />
                      </el-dialog>-->
                    </div>
                    <span style="font-size: 12px"
                      >（注：图片大小不超过30M）</span
                    >
                  </el-form-item>
                </div>
              </el-form>
            </el-col>
          </el-row>
          <!-- 商户选择 end -->

          <!-- 填写店铺信息 -->
          <el-row v-if="active === 1">
            <el-col :span="12" :offset="6">
              <el-form
                ref="formShop"
                :model="formShop"
                :rules="shopRules"
                :inline-message="true"
                label-position="left"
                label-width="95px"
                disabled
              >
                <el-form-item label="开业日期:" prop="openDate">
                  <el-date-picker
                    v-model="formShop.openDate"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>

                <el-form-item label="所属省份:" prop="province">
                  <el-input
                    v-model="formShop.province"
                    placeholder="请输入所属省份"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="所属城市:" prop="city">
                  <el-input
                    v-model="formShop.city"
                    placeholder="请输入所属城市"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="店铺地址:" prop="storeAddressDetail">
                  <el-input
                    v-model="formShop.storeAddressDetail"
                    placeholder="请输入店铺详细地址"
                    clearable
                  ></el-input>
                  <el-button
                    type="primary"
                    @click="getlocation()"
                    size="mini"
                    icon="el-icon-search"
                    style="margin-top: 5px"
                    >点击地图坐标获取经纬度</el-button
                  >
                </el-form-item>
                <!-- <map-Component v-if="mapflag" @childFn="parentFn(data)"></map-Component> -->
                <el-form-item label="经度:" prop="storeLng">
                  <el-input
                    v-model="formShop.storeLng"
                    placeholder="请获取经度"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="纬度:" prop="storeLat">
                  <el-input
                    v-model="formShop.storeLat"
                    placeholder="请获取纬度"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="经销商名:" prop="companyName">
                  <el-input
                    v-model="formShop.companyName"
                    placeholder="请输入经销商名"
                    clearable
                  ></el-input>
                </el-form-item>

                <el-form-item label="营业时间:" prop="shopHours">
                  <el-time-picker
                    v-model="formShop.value1"
                    value-format="HH:mm"
                    placeholder="营业开始时间"
                    style="width: 150px"
                  ></el-time-picker
                  >-
                  <el-time-picker
                    arrow-control
                    v-model="formShop.value2"
                    value-format="HH:mm"
                    placeholder="营业结束时间"
                    style="width: 150px"
                  ></el-time-picker>
                </el-form-item>

                <el-form-item label prop label-width="0px">
                  <img style="width: 800px" src alt />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <!-- 填写店铺信息 end -->

          <!-- 填写展示信息 -->
          <el-row v-if="active === 2">
            <el-col :span="12" :offset="6">
              <el-form
                ref="formShopShow"
                :model="formShopShow"
                :rules="shopShowRules"
                :inline-message="true"
                label-position="left"
                label-width="95px"
                disabled
              >
                <el-form-item label="法人:" prop="legalPerson">
                  <el-input
                    v-model="formShopShow.legalPerson"
                    placeholder="请输入法人名称"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="法人手机号:" prop="legalPersonPhone">
                  <el-input
                    v-model="formShopShow.legalPersonPhone"
                    placeholder="请输入法人手机号"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="店主姓名:" prop="storeOwnerName">
                  <el-input
                    v-model="formShopShow.storeOwnerName"
                    placeholder="请输入店主姓名"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="店主手机号:" prop="storeOwnerPhone">
                  <el-input
                    v-model="formShopShow.storeOwnerPhone"
                    placeholder="请输入店主手机号"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="店铺电话:" prop="storePhone">
                  <el-input
                    v-model="formShopShow.storePhone"
                    placeholder="请输入店铺电话"
                    clearable
                  ></el-input>
                </el-form-item>
                <!-- <el-form-item label="店铺评级:" prop="storeOwnerGrade">
                  <el-input v-model="formShopShow.storeOwnerGrade" placeholder="请输入店铺评级" clearable></el-input>
                </el-form-item>-->
                <el-form-item label="店长电话:" prop="storeManagerPhone">
                  <el-input
                    v-model="formShopShow.storeManagerPhone"
                    placeholder="请输入店长电话"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="店长姓名:" prop="storeManagerName">
                  <el-input
                    v-model="formShopShow.storeManagerName"
                    placeholder="请输入店长姓名"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="门头图片:" prop="doorwayPic">
                  <el-row>
                    <el-col style="margin: 10px; 0px; 10px; 0">
                      <el-upload
                        style="margin: 10px"
                        :action="action"
                        list-type="picture-card"
                        :limit="1"
                        :on-preview="handlePictureCardPreview"
                        :on-success="upLoadPicone"
                        :file-list="imgListone"
                        :headers="headers"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-col>
                  </el-row>
                  <span
                    style="
                                            font-size: 12px;
                                            margin-left: 20px;
                                        "
                    >（注：图片大小不超过30M）</span
                  >
                </el-form-item>
                <el-form-item label="店主照片:" prop="storeOwnerPic">
                  <el-row>
                    <el-col style="margin: 10px; 0px; 10px; 0">
                      <el-upload
                        style="margin: 10px"
                        :action="action"
                        list-type="picture-card"
                        :limit="1"
                        :on-preview="handlePictureCardPreview"
                        :on-success="upLoadPictwo"
                        :file-list="imgListtwo"
                        :headers="headers"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-col>
                  </el-row>
                  <span
                    style="
                                            font-size: 12px;
                                            margin-left: 20px;
                                        "
                    >（注：图片大小不超过30M）</span
                  >
                </el-form-item>
                <el-form-item label="店长照片:" prop="storeManagerPic">
                  <el-row>
                    <el-col style="margin: 10px; 0px; 10px; 0">
                      <el-upload
                        style="margin: 10px"
                        :action="action"
                        list-type="picture-card"
                        :limit="1"
                        :on-preview="handlePictureCardPreview"
                        :on-success="upLoadPicthree"
                        :file-list="imgListthree"
                        :headers="headers"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-col>
                  </el-row>
                  <span
                    style="
                                            font-size: 12px;
                                            margin-left: 20px;
                                        "
                    >（注：图片大小不超过30M）</span
                  >
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <!-- 填写展示信息 end -->

          <!-- 租金\收银 -->
          <el-row v-if="active === 3">
            <el-col :span="12" :offset="6">
              <el-form
                ref="formRental"
                :model="formRental"
                :rules="RentalRules"
                :inline-message="true"
                label-position="left"
                label-width="140px"
                disabled
              >
                <el-form-item label="所属大区:" prop="upOrgZone">
                  <el-select
                    v-model="formRental.upOrgZone"
                    placeholder="请选择"
                    clearable
                    @change="selCore(formRental.upOrgZone)"
                  >
                    <el-option
                      v-for="item in corpList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属营销区域:" prop="baseName">
                  <el-select
                    v-model="formRental.baseName"
                    placeholder="请选择"
                    clearable
                    @change="selbase(formRental.baseName)"
                  >
                    <el-option
                      v-for="item in RentalPayWay"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属业务员:" prop="basePersonName">
                  <el-select
                    v-model="formRental.basePersonName"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in Renarr"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="工行Merid(12位码):" prop="merid">
                  <el-input
                    v-model="formRental.merid"
                    placeholder="请输入工行Merid(12位码)"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="工行协议:" prop="agreement">
                  <el-input
                    v-model="formRental.agreement"
                    placeholder="请输入工行协议"
                    clearable
                  ></el-input>
                </el-form-item>

                <el-form-item label="微信识别码:" prop="wechatId">
                  <el-input
                    v-model="formRental.wechatId"
                    placeholder="请输入微信识别码"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <!-- 租金\收银 end -->
        </el-col>
        <el-col :span="24" style="text-align: center">
          <el-button
            v-if="active !== 0"
            type="success"
            plain
            style="margin-top: 12px"
            @click="prev"
          >
            <span v-if="active === 1">上一步, 查看店铺信息</span>
            <span v-if="active === 2">上一步, 查看店铺信息</span>
            <span v-if="active === 3">上一步, 查看展示信息</span>
            <span v-if="active === 4">上一步, 查看展示信息</span>
          </el-button>
          <el-button type="success" style="margin-top: 12px" @click="next">
            <span v-if="active === 0">下一步, 查看店铺信息</span>
            <span v-if="active === 1">下一步,查看展示信息</span>
            <span v-if="active === 2">下一步, 查看收银信息</span>
            <span v-if="active === 3">完成</span>
            <span v-if="active === 4" @click="goback()">返回</span>
          </el-button>
          <!-- <el-button type="success" style="margin-top: 12px;">
            <span @click="goback()">返回</span>
          </el-button>-->
        </el-col>
      </el-row>
    </div>
    <el-dialog
      slot="—"
      :title="title"
      :width="width"
      :visible.sync="showMapComponent"
      top="5vh"
      custom-class="baidu-map"
      @close="cancel"
    >
      <baidu-map
        :style="mapStyle"
        ak="F03lq7f1aDdDfGoQcVrRadknpCYEb7DO"
        :map-click="false"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        @click="getClickInfo"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @ready="onBaiduMapReady"
        @zoomend="syncCenterAndZoom"
      >
        <bm-view style="width: 100%; height: 100%" />
        <bm-marker
          :position="{ lng: center.lng, lat: center.lat }"
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
        />
        <bm-control :offset="{ width: '10px', height: '10px' }">
          <bm-auto-complete v-model="keyword" :sug-style="{ zIndex: 999999 }">
            <el-input
              v-model="keyword"
              type="text"
              placeholder="请输入地名关键字"
              clearable
            >
              <i slot="prefix" class="el-input__icon el-icon-search" />
            </el-input>
          </bm-auto-complete>
        </bm-control>
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          show-address-bar
          auto-location
        />
        <bm-local-search
          :keyword="keyword"
          :auto-viewport="true"
          :panel="false"
        />
      </baidu-map>
      <span slot="footer">
        <el-button icon="el-icon-close" @click="cancel">取 消</el-button>
        <el-button icon="el-icon-place" type="primary" @click="confirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllZone,
  getAllBase,
  getBaseUserInfo,
  applyShop,
} from '@/api/addShopapply.js';
// import mapComponent from "@/components/mapComponent";
import {
  BaiduMap,
  BmControl,
  BmView,
  BmAutoComplete,
  BmLocalSearch,
  BmMarker,
  BmGeolocation,
} from 'vue-baidu-map';
import { dict } from '../../../dict';

export default {
  name: 'AddCaterMerchants',

  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker,
    BmGeolocation,
  },
  props: {
    // 在子组件中使用 props 选项去接收来自父组件传递过来的数据
    // dialogVisible: Boolean,
    mapHeight: {
      type: Number,
      default: 450,
    },
    title: {
      type: String,
      default: '点击目标位置自动获取经纬度',
    },
    width: {
      type: [Number, String],
      default: '85%',
    },
    height: {
      type: [Number, String],
      default: '80%',
    },
  },
  data() {
    return {
      action: `${process.env.VUE_APP_BASE_API}/api/file-service/v1/file/uploadFile`,
      imgList: [],
      imgListone: [],
      imgListtwo: [],
      imgListthree: [],
      //   dialogVisible1: false,
      data1: '',
      BMap: null, // 地图组件是否就绪
      showMapComponent: false,
      keyword: '', // 地区搜索的信息
      mapStyle: {
        width: '100%',
        height: this.mapHeight + 'px',
      },
      center: {
        lng: 116.404,
        lat: 39.915,
      },
      choosedLocation: {
        province: '',
        city: '',
        district: '',
        addr: '',
      },
      zoom: 15,
      active: 0, //步骤计数
      // 选择商户

      formCorp: {
        storeName: '',
        storeType: '1', //店铺类型(1标准店、2精品店、3综合体验店)
        managerArea: '', //经营面积
        buildingArea: '', //建筑面积
        practicalArea: '', //实用面积
        leaseholdArea: '', //租赁面积
        warehouseArea: '', //仓库面积

        leaseholdArea: '', //
        businessLicense: '',
      },
      rules: {
        // storeName: [{ required: true, message: "请输入店铺名称" }],
        // storeType: [{ required: true, message: "请输入店铺类型" }],
        // managerArea: [{ required: true, message: "请输入经营面积" }],
        // buildingArea: [{ required: true, message: "请输入建筑面积" }],
        // leaseholdArea: [{ required: true, message: "请输入租赁面积" }],
        // warehouseArea: [{ required: true, message: "请输入仓库面积" }],
        // businessLicense: [{ required: true, message: "请上传营业执照照片" }]
      },
      corpDetails: {}, //商家详情
      corpList: [], //商户列表
      Renarr: [],
      // 选择商户 end
      // 文件
      dialogVisible: false,
      dialogImageUrl: '',
      // /文件
      // 店铺信息
      formShop: {
        openDate: '', //经营状态
        province: '', //租赁时间 开业时间
        city: '',
        storeAddressDetail: '',
        storeLng: '',
        storeLat: '',
        companyName: '',
        value1: new Date(2016, 9, 10, 18, 40),
        value2: new Date(2016, 9, 10, 18, 40),
      },
      openTime: [],
      shopRules: {
        // status: [{ required: true, message: "请选择营业状态" }],
        // rentDate: [{ required: true, message: "请选择开业时间" }],
        // shop_name: [{ required: true, message: "请输入店铺名称" }],
        // shop_alias: [{ required: true, message: "请输入店铺别名" }],
        // telephone: [{ required: true, message: "请输入联系电话" }],
        // shopHours: [{ required: true, message: "请选择营业时间" }],
        // addess: [{ required: true, message: "请输入店铺地址" }],
        // shopBerths: [{ required: true, message: "请选择铺位选择" }]
      },
      // 星期
      checkAllWeek: false,
      isIndeterminate: true,
      week: [
        {
          weekNum: 1,
          weekName: '星期一',
        },
        {
          weekNum: 2,
          weekName: '星期二',
        },
        {
          weekNum: 3,
          weekName: '星期三',
        },
        {
          weekNum: 4,
          weekName: '星期四',
        },
        {
          weekNum: 5,
          weekName: '星期五',
        },
        {
          weekNum: 6,
          weekName: '星期六',
        },
        {
          weekNum: 0,
          weekName: '星期天',
        },
      ],
      // 每日时间
      DateTime: [
        {
          value: '1',
          label: '每日营业时间一致',
        },
      ],
      // 店铺信息
      // 店铺展示
      formShopShow: {
        legalPerson: '',
        legalPersonPhone: '',
        storeOwnerName: '',
        storeOwnerPhone: '',
        storePhone: '',
        storeOwnerGrade: '',
        storeManagerPhone: '',
        storeManagerName: '',
        doorwayPic: '',
        storeOwnerPic: '',
        storeManagerPic: '',
      },
      headers: {
        token: localStorage.getItem('token'),
      },
      shopShowRules: {
        introduction: [
          {
            required: true,
            message: '请输入门店介绍',
            trigger: 'blur',
          },
        ],
        shopPhotos: [
          {
            required: true,
            message: '请添加门店图片',
            trigger: 'change',
          },
        ],
        recmdProducts: [
          {
            required: true,
            message: '请添加推荐商品',
            trigger: 'change',
          },
        ],
      },
      dialogRecmdProducts: false,
      // 店铺展示show end
      // 租金\收银
      formRental: {
        upOrgZone: '',
        baseCode: '',
        // basePersonCode: "",
        merid: '',
        agreement: '',
        wechatId: '',
      },
      RentalRules: {},
      RentalPayWay: [],
      // 租金\收银 end
    };
  },
  watch: {
    dialogVisible: function(currentValue) {
      this.showMapComponent = currentValue;
      if (currentValue) {
        this.keyword = '';
      }
    },
  },
  computed: {
    storeType: () => dict.storeType
  },
  mounted() {
    this._getAllZone();
    console.log(this.$route.params.v, 'llll');
    if (this.$route.params.v) {
      this.formCorp.storeName = this.$route.params.v.storeName;
      this.formCorp.storeType = String(this.$route.params.v.storeType);
      this.formCorp.managerArea = this.$route.params.v.managerArea;
      this.formCorp.buildingArea = this.$route.params.v.buildingArea;
      this.formCorp.practicalArea = this.$route.params.v.practicalArea;
      this.formCorp.leaseholdArea = this.$route.params.v.leaseholdArea;
      this.formCorp.warehouseArea = this.$route.params.v.warehouseArea;
      this.formCorp.leaseholdArea = this.$route.params.v.leaseholdArea;
      this.formCorp.businessLicense = this.$route.params.v.businessLicense;
      //   this.imgList.push(this.formCorp.businessLicense);

      console.log(this.imgList, 'opop');
      this.formShop.openDate = this.$route.params.v.openDate;
      this.formShop.province = this.$route.params.v.province;
      this.formShop.city = this.$route.params.v.city;
      this.formShop.storeAddressDetail = this.$route.params.v.storeAddressDetail;
      // storeLng: this.formShop.storeLng,
      // storeLat: this.formShop.storeLat,
      this.formShop.storeLng = this.$route.params.v.storeLng;
      this.formShop.storeLat = this.$route.params.v.storeLat;
      this.formShop.companyName = this.$route.params.v.companyName;
      this.formShop.openBeginTime = this.$route.params.v.openBeginTime;
      this.formShop.value1 = this.$route.params.v.openBeginTime;
      this.formShop.openEndTime = this.$route.params.v.openEndTime;
      this.formShop.value2 = this.$route.params.v.openEndTime;

      this.formShopShow.legalPerson = this.$route.params.v.legalPerson;
      this.formShopShow.legalPersonPhone = this.$route.params.v.legalPersonPhone;
      this.formShopShow.storeOwnerName = this.$route.params.v.storeOwnerName;
      this.formShopShow.storeOwnerPhone = this.$route.params.v.storeOwnerPhone;
      this.formShopShow.storePhone = this.$route.params.v.storePhone;
      this.formShopShow.storeOwnerGrade = this.$route.params.v.storeOwnerGrade;
      this.formShopShow.storeManagerPhone = this.$route.params.v.storeManagerPhone;
      this.formShopShow.storeManagerName = this.$route.params.v.storeManagerName;
      this.formShopShow.doorwayPic = this.$route.params.v.doorwayPic;
      this.formShopShow.storeOwnerPic = this.$route.params.v.storeOwnerPic;
      this.formShopShow.storeManagerPic = this.$route.params.v.storeManagerPic;
      this.formRental.upOrgZone = this.$route.params.v.upOrgZone;
      this.formRental.baseName = this.$route.params.v.baseName;
      this.formRental.baseCode = this.$route.params.v.baseCode;

      //   this.formRental.basePersonCode = this.$route.params.v.basePersonCode;
      this.formRental.basePersonName = this.$route.params.v.basePersonName;
      this.formRental.merid = this.$route.params.v.merid;
      this.formRental.agreement = this.$route.params.v.agreement;
      this.formRental.wechatId = this.$route.params.v.wechatId;

      this.imgList.push({
        url: this.formCorp.businessLicense,
        status: 'finished',
      }); //上传成功之后把值添加到imglist中
      this.imgListone.push({
        url: this.formShopShow.doorwayPic,
        status: 'finished',
      }); //上传成功之后把值添加到imglist中
      this.imgListtwo.push({
        url: this.formShopShow.storeOwnerPic,
        status: 'finished',
      }); //上传成功之后把值添加到imglist中
      this.imgListthree.push({
        url: this.formShopShow.storeManagerPic,
        status: 'finished',
      }); //上传成功之后把值添加到imglist中
    }
  },
  methods: {
    goback() {
      //   this.$router.push("/headexamine");
      this.$router.go('-1');
    },
    getMsgFormSon(data) {
      console.log(data, '666');
    },

    getlocation() {
      this.showMapComponent = true;
    },
    _getAllZone() {
      let data = {};

      //  };
      getAllZone(data).then((res) => {
        this.corpList = res.result;
      });
    },

    selCore(value) {
      console.log(value, 'kk');
      let data = {
        code: value,
      };
      getAllBase(data).then((res) => {
        this.RentalPayWay = res.result;
      });
    },
    // parentFn(childData) {
    //   this.message = childData;
    //   console.log("kjk");
    // },
    selbase(value) {
      console.log(value, 'kk');
      let data = {
        orgSeq: value,
      };
      getBaseUserInfo(data).then((res) => {
        this.Renarr = res.result;
      });
    },
    handleCheckAllWeekChange(val) {
      var week = [1, 2, 3, 4, 5, 6, 0];
      this.formShop.shopHours = val ? week : [];
      this.isIndeterminate = false;
    },
    // 单选
    handleCheckedWeekChange(value) {
      var checkedCount = value.length;
      this.checkAllWeek = checkedCount === this.week.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.week.length;
    },
    // 店铺信息 end
    // 展示信息
    addType() {
      this.formShopShow.shopPhotos.push({
        id: '',
        fileType: '',
        label: '',
        labelOrdinal: '',
        ordinal: '',
        url: '',
      });
    },
    delType(index) {
      if (this.formShopShow.shopPhotos.length > 1) {
        this.formShopShow.shopPhotos.splice(index, 1);
      }
    },

    addRecmdProducts() {
      var index = 1;
      this.dialogRecmdProducts = false;
      this.formShopShow.recmdProducts.push({
        id: ++index,
        productId: '',
        productName: this.formShopShow.productName,
        introduction: this.formShopShow.introduction,
        ordinal: '',
        url: '',
      });
    },

    addProduct() {
      this.dialogRecmdProducts = true;
      this.formShopShow.productName = '';
      this.formShopShow.introduction = '';
    },
    handleClose() {
      this.dialogRecmdProducts = false;
    },
    edit(item) {
      this.dialogRecmdProducts = true;
    },
    deleteX(item) {
      this.$confirm('是否删除').then(() => {});
    },

    handlePictureCardPreview(file) {
      console.log(file, 'ooo');
      //   this.dialogImageUrl = file.result;
      //   this.dialogVisible1 = true;
    },
    upLoadPic(file, fileList) {
      console.log(file, 'popo');
      this.dialogImageUrl = file.result;
      this.formCorp.businessLicense = file.result;
    },
    upLoadPicone(file, fileList) {
      console.log(file, 'popo');
      this.formShopShow.doorwayPic = file.result;
    },
    upLoadPictwo(file, fileList) {
      console.log(file, 'popo');
      this.formShopShow.storeOwnerPic = file.result;
    },
    upLoadPicthree(file, fileList) {
      console.log(file, 'popo');
      this.formShopShow.storeManagerPic = file.result;
    },
    //验证表单信息
    submitForm(formName, success) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //通过进入下一步
          this.active += 1;
          success && success();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    prev() {
      if (this.active-- === 0) this.active = 0;
    },
    next() {
      //每一步都要验证表单

      if (this.active === 0) {
        //验证商家信息
        this.submitForm('formCorp');
      } else if (this.active === 1) {
        //验证店铺信息
        this.submitForm('formShop');
      } else if (this.active === 2) {
        //验证展示信息
        this.submitForm('formShopShow');
      } else if (this.active === 3) {
        //验证租金收银信息
        this.submitForm('formRental', () => {
          //全部通过 提交ajax
          //   console.log("oopop");
          //   this.postFormAjax();
        });
      }
    },
    postFormAjax() {
      let data = {
        // 选择商户参数
        storeName: this.formCorp.storeName,
        storeType: this.formCorp.storeType,
        managerArea: this.formCorp.managerArea,
        buildingArea: this.formCorp.buildingArea,
        practicalArea: this.formCorp.practicalArea,
        leaseholdArea: this.formCorp.leaseholdArea,
        warehouseArea: this.formCorp.warehouseArea,
        leaseholdArea: this.formCorp.leaseholdArea,
        businessLicense: this.formCorp.businessLicense,

        openDate: this.formShop.openDate,
        province: this.formShop.province,
        city: this.formShop.city,
        storeAddressDetail: this.formShop.storeAddressDetail,
        // storeLng: this.formShop.storeLng,
        // storeLat: this.formShop.storeLat,
        storeLng: this.formShop.storeLng,
        storeLat: this.formShop.storeLat,
        companyName: this.formShop.companyName,
        openBeginTime: this.formShop.openBeginTime,
        openEndTime: this.formShop.openEndTime,

        legalPerson: this.formShopShow.legalPerson,
        legalPersonPhone: this.formShopShow.legalPersonPhone,
        storeOwnerName: this.formShopShow.storeOwnerName,
        storeOwnerPhone: this.formShopShow.storeOwnerPhone,
        storePhone: this.formShopShow.storePhone,
        storeOwnerGrade: this.formShopShow.storeOwnerGrade,
        storeManagerPhone: this.formShopShow.storeManagerPhone,
        storeManagerName: this.formShopShow.storeManagerName,
        doorwayPic: this.formShopShow.doorwayPic,
        storeOwnerPic: this.formShopShow.storeOwnerPic,
        storeManagerPic: this.formShopShow.storeManagerPic,

        upOrgZone: this.formRental.upOrgZone,
        baseCode: this.formRental.baseCode,
        baseName: this.formRental.baseName,
        baseCode: this.formRental.baseCode,
        // basePersonCode: this.formRental.basePersonCode,
        basePersonName: this.formRental.basePersonName,
        merid: this.formRental.merid,
        agreement: this.formRental.agreement,
        wechatId: this.formRental.wechatId,
      };
      console.log(data);
      this.$confirm('确认提交审核吗？').then(() => {
        applyShop(data).then((res) => {
          console.log(res);

          this.$message({
            message: '提交成功',
            type: 'success',
            center: true,
          });
        });
      });
    },
    // ready事件：在你需要二次开发或手动控制其子组件，可以使用在此事件中使用返回的 BMap 类和 map 实例进行手动控制
    onBaiduMapReady(e) {
      console.log('返回BMap类和map实例', e);
      const that = this;
      this.BMap = e.BMap;
      if (this.BMap) {
        // 获取定位地址信息并赋值给声明变量
        // Geolocation 对象的 getCurrentPosition()、watchPosition()、clearWatch() 方法详解 ：https://blog.csdn.net/zyz00000000/article/details/82774543
        const geolocation = new this.BMap.Geolocation();
        // 通过 getCurrentPosition() 方法：获取当前的位置信息
        geolocation.getCurrentPosition((res) => {
          console.log('返回详细地址和经纬度', res);
          const { lng, lat } = res.point;
          const {
            province,
            city,
            district,
            street,
            street_number,
          } = res.address;

          that.center = {
            lng,
            lat,
          };
          that.choosedLocation = {
            province,
            city,
            district,
            addr: street + street_number,
            lng,
            lat,
          };
        });
      }
    },

    /** *
     * 地图点击事件。
     */
    getClickInfo(e) {
      // 调整地图中心位置
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;

      // 此时已经可以获取到BMap类
      if (this.BMap) {
        const that = this;
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder();
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(e.point, function(res) {
          console.log('获取经纬度', e.point, '获取详细地址', res);
          //   this.data1 = e.point.lng;

          alert('经度' + e.point.lng + '纬度' + e.point.lat);
          localStorage.setItem('storeLng', e.point.lng);
          localStorage.setItem('storeLat', e.point.lat);
          //   this.formShop.storeLng = e.point.lng;
          //   this.formShop.storeLat = e.point.lat;
          const addrComponent = res.addressComponents;
          const surroundingPois = res.surroundingPois;
          const province = addrComponent.province;
          const city = addrComponent.city;
          const district = addrComponent.district;
          let addr = addrComponent.street;
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`;
            } else {
              addr += `${surroundingPois[0].title}`;
            }
          } else {
            addr += addrComponent.streetNumber;
          }
          that.choosedLocation = {
            province,
            city,
            district,
            addr,
            ...that.center,
          };
        });
      }
    },

    syncCenterAndZoom(e) {
      // 返回地图当前的缩放级别
      this.zoom = e.target.getZoom();
    },
    /** *
     * 确认
     */
    confirm: function() {
      this.showMapComponent = false;
      this.$emit('map-confirm', this.choosedLocation);
    },
    /** *
     * 取消
     */
    cancel: function() {
      this.showMapComponent = false;

      this.$emit('cancel', this.showMapComponent);

      this.formShop.storeLng = localStorage.getItem('storeLng');
      this.formShop.storeLat = localStorage.getItem('storeLat');
    },
  },
};
</script>

<style lang="scss" scoped>
#add-cater-merchants {
  h2 {
    font-size: 24px;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(230, 231, 235);
  }

  .container {
    margin-top: 10px;
  }

  .el-input--medium .el-input__inner {
    height: auto !important;
  }

  .idcard {
    display: flex;
  }

  .idcard div {
    margin: 10px;
  }

  .bussLicPhoto {
    display: flex;
  }

  .bussLicPhoto div {
    margin: 5px;
    text-align: center;
  }
}

#add-cater-merchants.route-page {
  background: #fff;
  width: 80%;
  padding: 3% 0;
  margin: 0 auto;
  border: 2px #ccc dashed;
  margin-top: 2%;
}

/deep/.distpicker-address-wrapper select {
  height: 34px;
  font-size: 13px;
}
</style>
